<datascroller-demos></datascroller-demos>

<div class="content-section introduction">
    <div>
        <span class="feature-title">DataScroller</span>
        <span>DataScroller displays data with on demand loading using scroll. Scroll down to view the demo.</span>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView effect="fade">
        <p-tabPanel header="Documentation">
            <h3>Import</h3>
<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;DataScrollerModule&#125; from 'primeng/datascroller';
</code>
</pre>

            <h3>Getting Started</h3>
            <p>DataScroller requires a collection of items as its value, number of rows to load and a ng-template content to display
                    where each item can be accessed using the implicit variable.</p>

            <p>Throughout the samples, a car interface having vin, brand, year and color properties are used
                to define an object to be displayed by the datascroller. Cars are loaded by a CarService that
                connects to a server to fetch the cars with a Promise.</p>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export interface Car &#123;
    vin;
    year;
    brand;
    color;
&#125;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
import &#123;Injectable&#125; from 'angular2/core';
import &#123;Http, Response&#125; from 'angular2/http';
import &#123;Car&#125; from '../domain/car';

@Injectable()
export class CarService &#123;

    constructor(private http: Http) &#123;&#125;

    getCarsLarge() &#123;
        return this.http.get('/showcase/resources/data/cars-large.json')
                    .toPromise()
                    .then(res => &lt;Car[]&gt; res.json().data)
                    .then(data => &#123; return data; &#125;);
    &#125;
&#125;
</code>
</pre>

            <p>Here is a sample DataScroller that displays a list of cars where each load event adds 10 more rows if available.</p>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class DataScrollertDemo implements OnInit &#123;

    cars: Car[];

    constructor(private carService: CarService) &#123; &#125;

    ngOnInit() &#123;
        this.carService.getCarsLarge().then(cars => this.cars = cars);
    &#125;
&#125;
</code>
</pre>

<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-dataScroller [value]="cars" [rows]="10"&gt;
    &lt;ng-template let-car pTemplate="item"&gt;
        Car content
    &lt;/ng-template&gt;
&lt;/p-dataScroller&gt;
</code>
</pre>

            <h3>Sections</h3>
            <p>Header and Footer are the two sections that are capable of displaying custom content.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-dataScroller [value]="cars" [rows]="10"&gt;
    &lt;p-header&gt;List of Cars&lt;/p-header&gt;
    &lt;p-footer&gt;Choose from the list.&lt;/p-footer&gt;
    &lt;ng-template let-car pTemplate="item"&gt;
        Car content
    &lt;/ng-template&gt;
&lt;/p-dataScroller&gt;
</code>
</pre>

            <h3>Inline</h3>
            <p>By default DataScroller listens to the scroll event of window, the alternative is the inline mode where container of the DataScroller element itself is used as the event target. Set inline option to true to enable this mode.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-dataScroller [value]="cars" [inline]="true" [rows]="10"&gt;
    &lt;ng-template let-car pTemplate="item"&gt;
        Car content
    &lt;/ng-template&gt;
&lt;/p-dataScroller&gt;
</code>
</pre>

            <h3>Lazy Loading</h3>
            <p>Lazy mode is handy to deal with large datasets, instead of loading the entire data, small chunks of data is loaded by invoking
             onLazyLoad callback everytime paging happens. To implement lazy loading,
            enable lazy attribute and provide a method callback using onLazyLoad that actually loads the data from a remote datasource along with the logical number of total records. onLazyLoad gets an event object
            that contains information about what to load.</p>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-dataScroller [value]="cars" [rows]="10" [lazy]="true" (onLazyLoad)="loadData($event)" [totalRecords]="totalRecords"&gt;
    &lt;ng-template let-car pTemplate="item"&gt;
        Car content
    &lt;/ng-template&gt;
&lt;/p-dataScroller&gt;
</code>
</pre>

<pre>
<code class="language-typescript" pCode ngNonBindable>
loadData(event) &#123;
    //event.first = First row offset
    //event.rows = Number of rows per page
    //add more records to the cars array
&#125;
</code>
</pre>

            <h3>Properties</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>value</td>
                            <td>array</td>
                            <td>null</td>
                            <td>An array of objects to display.</td>
                        </tr>
                        <tr>
                            <td>rows</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Number of rows to fetch in a load event.</td>
                        </tr>
                        <tr>
                            <td>lazy</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Defines if data is loaded and interacted with in lazy manner.</td>
                        </tr>
                        <tr>
                            <td>inline</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Defines if the event target to listen the scroll event is the element itself.</td>
                        </tr>
                        <tr>
                            <td>scrollHeight</td>
                            <td>any</td>
                            <td>null</td>
                            <td>Max height of the content area in inline mode.</td>
                        </tr>
                        <tr>
                            <td>loader</td>
                            <td>any</td>
                            <td>null</td>
                            <td>Reference of the target element whose click event loads the data instead of scrolling.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>trackBy</td>
                            <td>Function</td>
                            <td>null</td>
                            <td>Function to optimize the dom operations by delegating to ngForTrackBy, default algoritm checks for object identity.</td>
                        </tr>
                        <tr>
                            <td>buffer</td>
                            <td>number</td>
                            <td>0.9</td>
                            <td>Number of buffer size.</td>
                        </tr>
                        <tr>
                            <td>totalRecords</td>
                            <td>number</td>
                            <td>null</td>
                            <td>Number of total records, defaults to length of value when not defined.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Events</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Parameters</th>
                        <th>Description</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onLazyLoad</td>
                            <td>event.first = First row offset <br>
                                event.rows = Number of rows per page <br></td>
                            <td>Callback to invoke in lazy mode to load new data.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Methods</h3>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>reset</td>
                            <td>-</td>
                            <td>Resets data.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Styling</h3>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                    <tr>
                        <th>Name</th>
                        <th>Element</th>
                    </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>ui-datascroller</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>ui-datascroller-header</td>
                            <td>Header section.</td>
                        </tr>
                        <tr>
                            <td>ui-datascroller-footer</td>
                            <td>Footer section.</td>
                        </tr>
                        <tr>
                            <td>ui-datascroller-content</td>
                            <td>Wrapper of item container.</td>
                        </tr>
                        <tr>
                            <td>ui-datascroller-list</td>
                            <td>Item container element.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h3>Dependencies</h3>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/datascroller" class="btn-viewsource" target="_blank">
                <i class="fa fa-github"></i>
                <span>View on GitHub</span>
            </a>
<pre>
<code class="language-markup" pCode ngNonBindable>
&lt;p-dataScroller [value]="cars" [rows]="10"&gt;
    &lt;p-header&gt;
        Scroll Down to Load More
    &lt;/p-header&gt;
    &lt;ng-template let-car pTemplate="item" let-i="index"&gt;
        &lt;div class="ui-g car-item"&gt;
            &lt;div class="ui-g-12 ui-md-3"&gt;
                &lt;img src="assets/showcase/images/demo/car/&#123;&#123;car.brand&#125;&#125;.png"&gt;
            &lt;/div&gt;
            &lt;div class="ui-g-12 ui-md-9"&gt;
                &lt;div class="ui-g"&gt;
                    &lt;div class="ui-g-2 ui-sm-6"&gt;Vin: &lt;/div&gt;
                    &lt;div class="ui-g-10 ui-sm-6"&gt;&#123;&#123;car.vin&#125;&#125;&lt;/div&gt;

                    &lt;div class="ui-g-2 ui-sm-6"&gt;Year: &lt;/div&gt;
                    &lt;div class="ui-g-10 ui-sm-6"&gt;&#123;&#123;car.year&#125;&#125;&lt;/div&gt;

                    &lt;div class="ui-g-2 ui-sm-6"&gt;Brand: &lt;/div&gt;
                    &lt;div class="ui-g-10 ui-sm-6"&gt;&#123;&#123;car.brand&#125;&#125;&lt;/div&gt;

                    &lt;div class="ui-g-2 ui-sm-6"&gt;Color: &lt;/div&gt;
                    &lt;div class="ui-g-10 ui-sm-6"&gt;&#123;&#123;car.color&#125;&#125;&lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/ng-template&gt;
&lt;/p-dataScroller&gt;
</code>
</pre>
<pre>
<code class="language-typescript" pCode ngNonBindable>
export class DataScrollerDemo implements OnInit &#123;

    cars: Car[];

    constructor(private carService: CarService) &#123; &#125;

    ngOnInit() &#123;
        this.carService.getCarsMedium().then(cars => this.cars = cars);
    &#125;
&#125;
</code>
</pre>
        </p-tabPanel>
    </p-tabView>
</div>

<div class="content-section implementation">
    <p-dataScroller [value]="cars" [rows]="10">
        <p-header>
            Scroll Down to Load More
        </p-header>
        <ng-template let-car pTemplate="item" let-i="index">
            <div class="ui-g car-item">
                <div class="ui-g-12 ui-md-3">
                    <img src="assets/showcase/images/demo/car/{{car.brand}}.png">
                </div>
                <div class="ui-g-12 ui-md-9">
                    <div class="ui-g">
                        <div class="ui-g-2 ui-sm-6">Vin: </div>
                        <div class="ui-g-10 ui-sm-6">{{car.vin}}</div>
            
                        <div class="ui-g-2 ui-sm-6">Year: </div>
                        <div class="ui-g-10 ui-sm-6">{{car.year}}</div>
            
                        <div class="ui-g-2 ui-sm-6">Brand: </div>
                        <div class="ui-g-10 ui-sm-6">{{car.brand}}</div>
            
                        <div class="ui-g-2 ui-sm-6">Color: </div>
                        <div class="ui-g-10 ui-sm-6">{{car.color}}</div>
                    </div>
                </div>
            </div>
        </ng-template>
    </p-dataScroller>
</div>